<template>
  <div class="scenic-page">
    <!-- 页面头部 -->
    <div class="page-header bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-6">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
              景区门票
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2">
              便捷购票，畅游贵港景区
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <!-- 搜索和筛选区 -->
      <div class="search-filter-section bg-white rounded-lg shadow-sm p-6 mb-8">
        <!-- 搜索框 -->
        <div class="search-box mb-6">
          <FormInput
            v-model="searchQuery"
            placeholder="搜索景点名称、地址或关键词"
            prefix-icon="Search"
            clearable
            @keyup.enter="handleSearch"
          />
        </div>

        <!-- 筛选条件 -->
        <div class="filter-options space-y-4">
          <!-- 景点类型 -->
          <div class="filter-item">
            <div class="filter-label mb-2">景点类型</div>
            <div class="filter-content flex flex-wrap gap-2">
              <el-tag
                v-for="type in scenicTypes"
                :key="type.value"
                :type="selectedType === type.value ? 'primary' : 'info'"
                class="cursor-pointer"
                @click="handleTypeSelect(type.value)"
              >
                {{ type.label }}
              </el-tag>
            </div>
          </div>

          <!-- 特色标签 -->
          <div class="filter-item">
            <div class="filter-label mb-2">特色标签</div>
            <div class="filter-content flex flex-wrap gap-2">
              <el-check-tag
                v-for="tag in featureTags"
                :key="tag.value"
                :checked="selectedTags.includes(tag.value)"
                @change="handleTagToggle(tag.value)"
              >
                {{ tag.label }}
              </el-check-tag>
            </div>
          </div>

          <!-- 排序方式 -->
          <div class="filter-item">
            <div class="filter-label mb-2">排序方式</div>
            <div class="filter-content">
              <el-radio-group v-model="sortBy" class="flex flex-wrap gap-4">
                <el-radio-button label="recommend">推荐排序</el-radio-button>
                <el-radio-button label="rating">评分最高</el-radio-button>
                <el-radio-button label="popular">人气最高</el-radio-button>
                <el-radio-button label="price_asc"
                  >价格从低到高</el-radio-button
                >
                <el-radio-button label="price_desc"
                  >价格从高到低</el-radio-button
                >
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>

      <!-- 景点列表 -->
      <div class="scenic-list">
        <!-- 列表头部 -->
        <div class="list-header flex items-center justify-between mb-6">
          <div class="total-count text-gray-600">
            共找到
            <span class="text-primary-600 font-medium">{{ total }}</span> 个景点
          </div>
          <div class="view-mode flex items-center space-x-2">
            <el-button-group>
              <el-button
                :type="viewMode === 'grid' ? 'primary' : 'default'"
                @click="viewMode = 'grid'"
              >
                <el-icon><Grid /></el-icon>
              </el-button>
              <el-button
                :type="viewMode === 'list' ? 'primary' : 'default'"
                @click="viewMode = 'list'"
              >
                <el-icon><List /></el-icon>
              </el-button>
            </el-button-group>
          </div>
        </div>

        <!-- 网格视图 -->
        <div
          v-if="viewMode === 'grid'"
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
        >
          <div
            v-for="scenic in scenicList"
            :key="scenic.id"
            class="scenic-card group"
          >
            <div class="card-image relative overflow-hidden rounded-lg">
              <el-image
                :src="scenic.coverImage"
                :alt="scenic.name"
                class="w-full aspect-[4/3] object-cover transition-transform group-hover:scale-105"
              />
              <div class="absolute top-3 right-3 z-10">
                <el-button
                  circle
                  :type="scenic.isFavorite ? 'danger' : 'default'"
                  @click.stop="handleToggleFavorite(scenic)"
                >
                  <el-icon>
                    <Star :filled="scenic.isFavorite" />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div class="card-content p-4">
              <h3 class="text-lg font-medium mb-2 line-clamp-1">
                {{ scenic.name }}
              </h3>
              <div class="meta-info text-sm text-gray-500 space-y-1 mb-3">
                <div class="flex items-center">
                  <el-icon class="mr-1"><Location /></el-icon>
                  <span>{{ scenic.address }}</span>
                </div>
                <div class="flex items-center justify-between">
                  <div class="rating flex items-center">
                    <el-rate
                      v-model="scenic.rating"
                      disabled
                      :max="5"
                      :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                      class="mr-1"
                    />
                    <span class="text-orange-500">{{ scenic.rating }}</span>
                  </div>
                  <span>{{ scenic.reviewCount }}条评价</span>
                </div>
              </div>
              <div class="tags mb-3">
                <el-tag
                  v-for="tag in scenic.tags"
                  :key="tag"
                  size="small"
                  class="mr-1 mb-1"
                >
                  {{ tag }}
                </el-tag>
              </div>
              <div class="flex items-center justify-between">
                <div class="price">
                  <span class="text-xs text-gray-500">门票</span>
                  <span class="text-lg text-primary-600 font-medium ml-1">
                    ¥{{ scenic.price }}
                  </span>
                  <span class="text-xs text-gray-500">起</span>
                </div>
                <el-button type="primary" @click="handleViewDetail(scenic)">
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 列表视图 -->
        <div v-else class="space-y-4">
          <div
            v-for="scenic in scenicList"
            :key="scenic.id"
            class="scenic-item bg-white rounded-lg shadow-sm overflow-hidden group"
          >
            <div class="flex">
              <div class="relative w-64 flex-shrink-0">
                <el-image
                  :src="scenic.coverImage"
                  :alt="scenic.name"
                  class="w-full h-full object-cover transition-transform group-hover:scale-105"
                />
                <div class="absolute top-3 right-3 z-10">
                  <el-button
                    circle
                    :type="scenic.isFavorite ? 'danger' : 'default'"
                    @click.stop="handleToggleFavorite(scenic)"
                  >
                    <el-icon>
                      <Star :filled="scenic.isFavorite" />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <div class="flex-1 p-6">
                <div class="flex items-start justify-between mb-4">
                  <div>
                    <h3 class="text-xl font-medium mb-2">{{ scenic.name }}</h3>
                    <div class="meta-info text-sm text-gray-500 space-y-1">
                      <div class="flex items-center">
                        <el-icon class="mr-1"><Location /></el-icon>
                        <span>{{ scenic.address }}</span>
                      </div>
                      <div class="flex items-center">
                        <el-rate
                          v-model="scenic.rating"
                          disabled
                          :max="5"
                          :colors="['#ffd21e', '#ffd21e', '#ffd21e']"
                          class="mr-1"
                        />
                        <span class="text-orange-500 mr-2">{{
                          scenic.rating
                        }}</span>
                        <span>{{ scenic.reviewCount }}条评价</span>
                      </div>
                    </div>
                  </div>
                  <div class="price text-right">
                    <div class="text-xs text-gray-500 mb-1">门票</div>
                    <div class="text-2xl text-primary-600 font-medium">
                      ¥{{ scenic.price }}
                      <span class="text-xs text-gray-500">起</span>
                    </div>
                  </div>
                </div>
                <div class="description text-gray-600 mb-4 line-clamp-2">
                  {{ scenic.description }}
                </div>
                <div class="flex items-center justify-between">
                  <div class="tags">
                    <el-tag
                      v-for="tag in scenic.tags"
                      :key="tag"
                      size="small"
                      class="mr-1"
                    >
                      {{ tag }}
                    </el-tag>
                  </div>
                  <el-button type="primary" @click="handleViewDetail(scenic)">
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination flex justify-center mt-8">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[12, 24, 36, 48]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import FormInput from "@/components/global/FormInput.vue";
import Breadcrumb from "@/components/global/Breadcrumb.vue";

const router = useRouter();

// 搜索和筛选
const searchQuery = ref("");
const selectedType = ref("");
const selectedTags = ref([]);
const sortBy = ref("recommend");

// 景点类型
const scenicTypes = [
  { label: "全部", value: "" },
  { label: "自然风光", value: "nature" },
  { label: "人文古迹", value: "cultural" },
  { label: "主题公园", value: "theme" },
  { label: "博物馆", value: "museum" },
  { label: "宗教寺庙", value: "temple" },
];

// 特色标签
const featureTags = [
  { label: "网红打卡", value: "popular" },
  { label: "亲子游玩", value: "family" },
  { label: "历史文化", value: "history" },
  { label: "自然探索", value: "nature" },
  { label: "摄影圣地", value: "photography" },
  { label: "休闲娱乐", value: "leisure" },
];

// 列表相关
const viewMode = ref("grid");
const currentPage = ref(1);
const pageSize = ref(12);
const total = ref(0);
const scenicList = ref([
  {
    id: 1,
    name: "贵港园博园",
    coverImage: "/images/scenic/yuanboyuan.jpg",
    address: "贵港市港北区",
    rating: 4.8,
    reviewCount: 1234,
    price: 68,
    tags: ["网红打卡", "亲子游玩", "自然探索"],
    description:
      "贵港园博园是一个集园艺展示、科普教育、休闲娱乐于一体的综合性公园，园内有多个主题园区，展示了贵港特色的园林艺术和植物文化。",
    isFavorite: false,
  },
  {
    id: 2,
    name: "贵港博物馆",
    coverImage: "/images/scenic/museum.jpg",
    address: "贵港市港北区",
    rating: 4.6,
    reviewCount: 856,
    price: 0,
    tags: ["历史文化", "博物馆"],
    description:
      "贵港博物馆是一座展示贵港历史文化的综合性博物馆，馆内收藏了大量反映贵港地区历史文化的文物和资料。",
    isFavorite: true,
  },
]);

// 处理搜索
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  fetchScenicList();
};

// 处理类型选择
const handleTypeSelect = (type) => {
  selectedType.value = type;
  fetchScenicList();
};

// 处理标签切换
const handleTagToggle = (tag) => {
  const index = selectedTags.value.indexOf(tag);
  if (index > -1) {
    selectedTags.value.splice(index, 1);
  } else {
    selectedTags.value.push(tag);
  }
  fetchScenicList();
};

// 处理收藏切换
const handleToggleFavorite = async (scenic) => {
  try {
    // TODO: 调用收藏/取消收藏API
    scenic.isFavorite = !scenic.isFavorite;
    ElMessage.success(scenic.isFavorite ? "收藏成功" : "已取消收藏");
  } catch (error) {
    ElMessage.error("操作失败，请重试");
  }
};

// 查看景点详情
const handleViewDetail = (scenic) => {
  router.push(`/scenic/${scenic.id}`);
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  pageSize.value = size;
  fetchScenicList();
};

// 处理页码变更
const handleCurrentChange = (page) => {
  currentPage.value = page;
  fetchScenicList();
};

// 获取景点列表
const fetchScenicList = async () => {
  try {
    // TODO: 调用获取景点列表API
    // const { data } = await getScenicList({
    //   page: currentPage.value,
    //   pageSize: pageSize.value,
    //   keyword: searchQuery.value,
    //   type: selectedType.value,
    //   tags: selectedTags.value,
    //   sortBy: sortBy.value
    // })
    // scenicList.value = data.list
    // total.value = data.total
  } catch (error) {
    ElMessage.error("获取景点列表失败");
  }
};

onMounted(() => {
  fetchScenicList();
});
</script>

<style lang="scss" scoped>
.scenic-page {
  .scenic-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition-shadow hover:shadow-md;
  }

  .scenic-item {
    .description {
      @apply text-sm leading-relaxed;
    }
  }
}
</style>
